<h4>
    <a ui-sref="groups.list">Groups:</a>
    <span class="label label-default">{{group.name}}</span>
</h4>

<button class="btn btn-default" ng-init="isAddFormCollapsed = true" ng-click="isAddFormCollapsed = !isAddFormCollapsed">
    增加用户
</button>

<form name="addGroupUserForm"
      ng-submit="addUser(selected.user.id, selected.access)"
      collapse="isAddFormCollapsed"
      role="form">

    <div class="form-group">
        <p>加入用户:</p>
        <ui-select ng-model="selected.user" theme="bootstrap" style="width: 300px;">
            <ui-select-match placeholder="Select User">{{$select.selected.name}}</ui-select-match>
            <ui-select-choices repeat="user in allUsers | propsFilter: {name: $select.search}">
                <span ng-bind-html="user.name"></span>
            </ui-select-choices>
        </ui-select>
    </div>

    <div class="form-group">
        <p>用户Access: {{selected.access}}</p>
        <ui-select ng-model="selected.access" theme="bootstrap" style="width: 300px;">
            <ui-select-match placeholder="Select Access">{{$select.selected | accessFilter}}</ui-select-match>
            <ui-select-choices repeat="access in accessArray">
                <span ng-bind-html="access | accessFilter"></span>
            </ui-select-choices>
        </ui-select>
    </div>

    <input type="submit"
           class="btn btn-success"
           ng-disabled="addGroupUserForm.$invalid || !selected.user || !selected.access">
</form>

<h3>Users:</h3>
<form role="form">
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
            <input type="text" class="form-control" placeholder="Search" ng-model="search.$">
        </div>
    </div>
</form>

<table class="table table-striped">

    <thead>
    <tr>
        <th>name</th>
        <th>nickName</th>
        <th>email</th>
        <th>provider</th>
        <th>access</th>

    </tr>
    </thead>

    <tr ng-repeat="user in users | filter:search | orderBy:'name'">
        <td>{{user.name}}</td>
        <td>{{user.nickName}}</td>
        <td>{{user.email}}</td>
        <td>{{user.provider}}</td>
        <td>{{user.access | accessFilter}}</td>

        {{ user.access}}

        <td>
            <button class="btn btn-danger danger" ng-click="popUpdateGroupUserModal(group, user)">Update</button>
            <button class="btn btn-danger danger" ng-really-click="deleteUser(user.id)">Delete</button>
        </td>

    </tr>
</table>